<template>
	
	<block v-if="!isComplete">
		<form @submit="form.submit($event,success)" data-action="/api/servicer/apply">
			
			<block v-if="loading">
				<empty :loading="true"></empty>
			</block>
			<block v-else>
				
				<view class="fixAuto bb ">
					<view class="w80">
						公司名称
					</view>
					<view>
						<input type="text" name="name|合唱团名称" v-model="data.name" maxlength="20" placeholder="20字以内">
					</view>
				</view>
				
				
				<view class="fixAuto bb middle " @tap="chooseLocation">
					<view class="w80">
						公司地址
					</view>
					<view class="item">
						<view class="flex rt ">
							<view class="gray">{{data.addressName? data.address + data.addressName:'请选择'}}</view>
							<view class="sIcon-arrowRight pl10 gray"></view>
							<!-- <input type="text" name="addressName|公司地址" :value="data.addressName" style="display: none;"/> -->
							<input type="text" name="address|公司地址" :value="data.address + data.addressName" style="display: none;"/>
							<!-- <input type="text" name="latitude" :value="data.latitude" style="display: none;"/>
							<input type="text" name="longitude" :value="data.longitude" style="display: none;"/> -->
						</view>
					</view>
				</view>
				
				<view class="fixAuto bb ">
					<view class="w80">
						联系人
					</view>
					<view>
						<input type="text" name="contacts|联系人" maxlength="20" placeholder="请输入联系人">
					</view>
				</view>
				
				<view class="fixAuto bb ">
					<view class="w80">
						手机号码
					</view>
					<view>
						<input type="number" name="mobile|手机号码|mobile" placeholder="入驻后该手机号将登录系统使用">
					</view>
				</view>
				
				<view class="fixAuto bb"  :class="{'middle':isIos}">
					<view class="w80">
						营业执照号
					</view>
					<view>
						<input name="license|营业执照号" :maxlength="50" placeholder="请输入营业执照号"/>
					</view>
				</view>
				
				<view class="fixAuto bb middle ptb20" @tap="toUploadImage('licensePic')">
					<view class="w80">
						营业执照
					</view>
					<view class="item">
						<view class="flex rt ">
							<view style="width: 50px;">
								<view class="square shadow rds4" v-if="data.licensePic">
									<image :src="data.licensePic" class="rds4 bd" mode="aspectFill"></image>
								</view>
								<view class="square rds4 grayBg " v-else>
									<view class="bd rds4  fz24 flex ct">
										<view class="sIcon-photoFill grey"></view>
									</view>
								</view>
								<input type="text" maxlength="-1" name="licensePic|营业执照原件" :value="data.licensePic" style="display: none;"/>
							</view>
							<view class="sIcon-arrowRight pl10 gray"></view>
						</view>
					</view>
				</view>
				
				<view class="flex pd10 ptb15">
					<view>资质文件</view>
					<view>
						{{data.picList.length}}/5
						<input type="text" name="authPic|资质文件" :value="data.pics" maxlength="-1" style="display: none;">
					</view>
				</view>
				<uploadPic @change="uploadPics" :count="5"></uploadPic>
				
				<view class="pd100 ptb30">
					<button form-type="submit" class="btn block rds23">
						提交入驻申请
					</button>
				</view>
			</block>
			
			
		</form>
	</block>
	<block v-else>
		
		<result title="等待审核" desc="您的入驻申请已提交,请等待审核。" icon="sIcon-clockFill" iconColor="#3385ff"></result>
		
	</block>
	
</template>

<script>
	import {Qiniu} from "../../common/upload.js" ;
	export default {
		data() {
			return {
				data : {
					id : "" ,
					intro : "" ,
					name : "" ,
					address : "" ,
					addressName : "" ,
					latitude : "" ,
					longitude : "" ,
					pics : "" ,
					licensePic : "" ,
					picList : []
				},
				value: null ,
				qiniu : new  Qiniu(),
				loading : false ,
				isIos : uni.getSystemInfoSync().platform == "ios" ,
				isComplete : false 
			}
		},
		
		onLoad(params) {
			this.data.id = params.id || "" ;
		},
		
		methods: {
			
			toUploadImage:function(key){
				var sourceTypes = ["album", "camera"];
				uni.showActionSheet({
					itemList:["从相册选择","从相机拍照"],
					success : res => {
						uni.chooseImage({
							sourceType:[sourceTypes[res.tapIndex]],
							count:1,
							success: res =>{
								uni.showNavigationBarLoading();
								this.qiniu.upload(res.tempFilePaths[0] , res =>{
									this.$set(this.data,key,res);
									uni.hideNavigationBarLoading();
								});
							}
						});
					}
				});
			},
			
			uploadPics:function(e){
				this.data.picList = e.list ;
				this.data.pics = e.value ;
			},
			
			success:function(e){
				this.isComplete = true ;
			},
			
			chooseLocation:function(e){
				uni.chooseLocation({
				    success:  (res) =>{
						this.data.address = res.address ;
						this.data.addressName = res.name ;
						this.data.latitude = res.latitude ;
						this.data.longitude = res.longitude ;
				    },
					fail : (e)=>{
						if (e.errMsg == 'chooseLocation:fail auth deny') {
							uni.showModal({
								title:'提示',
								content:'获取位置未授权，请先授权获取当前地理位置',
								showCancel:true,
								confirmColor:'#3385ff',
								success : (e)=>{
									if (e.confirm) {
										uni.openSetting({
										  success :(res) => {
											   console.log(res)
											  if (res.authSetting['scope.userLocation']) {
											  	 this.chooseLocation();
											  }
										      
										  }
										});
									}
								}
							});
						}
					},
				});
			},
		}
	}
</script>

<style>
page{
	background-color: #fff;
}
.fixAuto{
	padding: 30upx 10upx;
}
</style>
